<template>
  <div class="container">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-sticky>
        <div class="heads">
          <div class="search">
            <div class="search_postion">
              <div @click="selectPosition">
                <img src="../assets/index/position.svg" alt="" style="width: 15px;">
              </div>
              <div class="position_text" @click="selectPosition">
                <span>{{ cityName }}</span>
              </div>
            </div>
            <van-search @click="selectSearch" class="custom-search" v-model="value" placeholder="搜影片、影院"
              shape="round" />
          </div>
        </div>
      </van-sticky>
      <div class="banner-box" v-if="bannerData.length">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in bannerData" :key="index" @click="handleBanner(item)">
            <img :src="item.imageUrl" class="banner-img" />
          </van-swipe-item>
        </van-swipe>
      </div>

      <div class="hot-film">
        <div class="title-header">
          <div class="left-header">热门影片</div>
          <div class="right-header" @click="goFilms(1)">
            <div>全部</div>
            <div> <van-icon name="arrow" size="15" /></div>
          </div>
        </div>
        <!-- 影片内容 -->
        <div class="swipe" style="padding-left: 8px;">
          <div class="swipe-container">
            <div class="category-swipe">
              <div v-for="(item, index) in hotFilmList" :key="index">
                <div class="card-item">
                  <div class="card-img">
                    <img :src="$buildFullImageUrl + item.pic" class="poster">
                  </div>
                  <div class="card-title">{{ item.film_name }}</div>
                  <div class="card-tag">{{ item.film_type }}</div>
                  <van-button :style="{
                    background: item.isReleased ? '#EE473B' : '#87CEEB',
                    borderColor: item.isReleased ? '#EE473B' : '#87CEEB'
                  }" class="buy-btn" type="danger" size="small" round @click="buyPicket(item)">
                    {{ item.isReleased ? '兑换' : '预售' }}
                  </van-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="main-film" v-if="showbanner">
        <img :src="showadvert" alt="" @click="jumpLink">
      </div>
      <div class="upcoming">
        <div class="title-header">
          <div class="left-header">
            <div>即将上映</div>
            <!--          <div class="hot">热门推荐</div>-->
          </div>
          <div class="right-header" @click="goFilms(2)">
            <div>全部</div>
            <div>
              <van-icon name="arrow" size="15" />
            </div>
          </div>
        </div>
        <div class="swipe" style="padding-left: 8px;">
          <div class="swipe-container">
            <div class="category-swipe">
              <div v-for="(item, index) in soonFilmList" :key="index">
                <div class="card-item">
                  <div class="card-img">
                    <img :src="$buildFullImageUrl + item.pic" class="poster">
                  </div>
                  <div class="card-title">{{ item.film_name }}</div>
                  <div class="card-tag">{{ item.publish_date.substring(5) }}上映</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 影片/影院切换 -->
      <div class="section-box cinema-film-box">
        <div class="title-header">
          <div class="left-header tabs">
            <!-- 和福利兑换同一套 Tabs -->
            <van-tabs v-model="activeTab" animated title-active-color="#EE473B" color="#EE473B"
              title-inactive-color="#000">
              <van-tab title="影片" name="hot"></van-tab>
              <van-tab title="附近影院" name="fileName"></van-tab>


            </van-tabs>
          </div>
          <div class="right-header" @click="goMore">
            <div>全部</div>
            <van-icon name="arrow" size="15" />
          </div>
        </div>

        <!-- 列表 -->
        <div class="list-box">
          <hotFilm v-if="activeTab == 'hot'" nums="10"></hotFilm>
          <movieTheater v-if="activeTab == 'fileName'" nums="10"></movieTheater>
          <!-- <div v-for="i in 10" :key="i" class="list-item">
            <div class="item-left">
              <div class="item-name">{{ activeTab === 'film' ? '影片名称' + i : '影院名称' + i }}</div>
              <div class="item-desc">{{ activeTab === 'film' ? '类型 / 时长' : '地址信息' }}</div>
            </div>
            <div class="item-right">
              <van-button type="danger" size="mini" round>{{ activeTab === 'film' ? '购票' : '选座' }}</van-button>
            </div>
          </div> -->
        </div>
      </div>


      <div class="welfare" v-if="showwelfare">
        <div class="title-header" style="padding-bottom: 0;">
          <div class="left-header">
            福利兑换
          </div>
          <div class="right-header" @click="gowelfare">
            <div>全部</div>
            <div>
              <van-icon name="arrow" size="15" />
            </div>
          </div>
        </div>
        <div class="tabs">
          <van-tabs v-model="active" animated title-active-color="#EE473B" swipe-threshold="5" color="#EE473B"
            @click="getTabData" title-inactive-color="#5B626A">
            <van-tab v-for="(item, index) in categoryList" :title="item" :name="index" :key="index">
              <!-- 兑换内容 -->
              <div class="swipe-welfare" style="padding-left: 8px;">
                <div class="swipe-container">
                  <div class="category-swipe">
                    <div v-for="(item, index) in welfareList" :key="index"
                      @click="goDetail(item.product_no, item.imgs, item.officialPrice)">
                      <div class="card-item-welfare">
                        <div class="box">
                          <div class="card-img-welfare">
                            <img :src="item.imgs" class="poster-welfare">
                          </div>
                        </div>
                        <div class="card-title-welfare">{{ item.product_name }}</div>
                        <div class="exchange-btn">
                          <div class="price">¥{{ item.officialPrice }}</div>
                          <div class="text">兑换</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
import plantAPI from "@/api/plant";
import wx from "weixin-js-sdk";
import axios from "axios";
import movieTheater from '@/components/movieTheater.vue'
import hotFilm from '@/components/hotFilm.vue'
export default {
  components: { hotFilm, movieTheater },
  computed: {
    // 每 5 个一组，生成二维数组
    pages() {
      const pages = [];
      for (let i = 0; i < this.list.length; i += 5) {
        pages.push(this.list.slice(i, i + 5));
      }
      return pages;
    },
  },
  created() {
    this.getaccount();
    plantAPI.advertlist().then(res => {
      this.showadvert = res.rows[0].imageUrl
      this.showadvertJump = res.rows[0].skipStatus
    })
    plantAPI.bannerlist().then(res => {
      this.bannerData = res.rows
    })
    plantAPI.dictTypes('bannershow').then(res => {
      let data = res.rows.filter(item => item.status == 0)
      if (data[0].dictValue == 1) {
        // 显示
        this.showbanner = true
      } else {
        // 隐藏
        this.showbanner = false
      }
    })
    plantAPI.dictTypes('welfareshow').then(res => {
      // 判断是正常  停用
      let data = res.rows.filter(item => item.status == 0)
      if (data[0].dictValue == 1) {
        // 显示
        this.showwelfare = true
      } else {
        // 隐藏
        this.showwelfare = false
      }
    })
  },
  activated() {
    // 当页面被激活时检查是否有新选择的城市
    const savedCity = localStorage.getItem("cityName");
    if (savedCity) {
      this.cityName = savedCity;
      this.getCity_ID(this.cityName)
      localStorage.setItem("cityName", newCity);
    }
    // 确保缓存激活时也在顶部
    window.scrollTo({ top: 0, behavior: 'instant' })
  }, watch: {
    // 监听路由返回的城市变化
    "$route.query.selectedCity"(newCity) {
      if (newCity) {
        this.cityName = newCity;
        this.getCity_ID(this.cityName)
        localStorage.setItem("cityName", newCity);
      }
    },
  },
  mounted() {
    const savedCity = localStorage.getItem("cityName");
    if (savedCity) {
      this.cityName = savedCity;
      this.getCity_ID(this.cityName)
    }
    else {
      this.getLocationData();
    }
    this.$nextTick(() => {
      window.scrollTo(0, 0);
    });
  },
  methods: {
    goMore() {
      this.$router.push({
        name: 'films', query: {
          status: this.activeTab == 'hot' ? 1 : ''
        }
      });
    },
    handleBanner(item) {
      // skipStatus 为 0 跳转
      if (item.skipStatus == 0) {
        this.$router.push({ name: 'films' });
      }
    },
    jumpLink() {
      if (this.showadvertJump != '0') {
        return
      }
      this.$router.push({ name: 'films', query: { status: 1 } });
    },
    // 新增下拉刷新方法
    async onRefresh() {
      this.refreshing = true;
      try {
        // 重新获取所有数据
        await this.getaccount();
        const savedCity = localStorage.getItem("cityName");
        if (savedCity) {
          this.cityName = savedCity;
          this.getCity_ID(this.cityName);
        }
      } catch (error) {
      } finally {
        this.refreshing = false;
      }
    },
    formatPrice(price) {
      const num = Number(price);
      if (isNaN(num)) return '0.00';
      return (num / 100).toFixed(2);
    },
    goDetail(productNo, imgs, price) {
      sessionStorage.setItem(
        'welfarePayData',
        JSON.stringify({
          productNo,
          imgs,
          showPrice: price
        })
      );

      // 只带一个极短标识（没有也行）跳转到支付页
      window.location.replace(`https://xhjzh.life/welfarePay/?productNo=${productNo}`);
    },
    gowelfare() {
      this.$router.push({
        path: '/welfare',
      })
    },
    buyPicket(item) {
      this.$router.push({
        path: '/details',
        query: {
          film_id: item.film_id
        }
      })
    },
    getCity_ID(cityName) {
      plantAPI.getcityAPI().then(res => {
        this.cityData = JSON.parse(res.data.body).data
        this.cityData.forEach(element => {
          if (element.city_name == cityName || (element.city_name == (cityName.slice(0, -1)))) {
            localStorage.setItem("city_id", element.city_id)
          }
        });
      })

    },
    async getCityData(longitude, latitude) {
      try {
        const amapApiKey = "839728157770fadb4fadb5bec227a298";
        const mapurl = `https://restapi.amap.com/v3/geocode/regeo?key=${amapApiKey}&location=${longitude},${latitude}&output=JSON&batch=false&roadlevel=0`;
        const response = await axios.get(mapurl);
        // 城市信息
        const { regeocode } = response.data;
        if (!regeocode) {
          return null;
        }
        const { addressComponent } = regeocode;
        this.addressComponent = addressComponent

        const city = addressComponent.city || addressComponent.district; // 兼容直辖市（如北京市的 city 可能为空，district 为“北京市”）
        const province = addressComponent.province;
        const district = addressComponent.district;
        this.cityName = city
        this.getCity_ID(this.cityName)
        localStorage.setItem("cityName", this.cityName)

      } catch (error) {
      }
    },
    // 判断是否为微信内置浏览器
    isWechatBrowser() {
      const ua = window.navigator.userAgent.toLowerCase();
      return ua.includes('micromessenger'); // 微信浏览器的 userAgent 包含 "micromessenger"
    },
    getLocationData() {
      if (this.isWechatBrowser()) {
        this.getLocationByWechat();
      } else {
        this.getLocationByBrowser();
      }
    },
    getLocationByWechat() {
      const url = window.location.href.split('#')[0];
      plantAPI.wxSign({
        url
      }).then(res => {
        this.getWxConfigConfig({
          timestamp: res.data.timestamp,
          nonceStr: res.data.nonceStr,
          signature: res.data.signature,
        })
      })

    },
    getLocationByBrowser() {
      // 检查浏览器是否支持 Geolocation
      if (!navigator.geolocation) {
        this.$toast("浏览器不支持位置获取，请升级浏览器");
        return;
      }

      // 调用原生 API 获取位置
      navigator.geolocation.getCurrentPosition(
        (position) => {
          // 成功回调：获取经纬度
          const latitude = position.coords.latitude; // 纬度
          const longitude = position.coords.longitude; // 经度
          this.userLocation = {
            longitude, latitude
          }
          localStorage.setItem('longitude', this.userLocation.longitude)
          localStorage.setItem('latitude', this.userLocation.latitude)
          this.getCityData(this.userLocation.longitude, this.userLocation.latitude)
        },
        (error) => {
          let longitude = localStorage.getItem('longitude')
          let latitude = localStorage.getItem('latitude')
          this.getCityData(longitude, latitude)
        },
        {
          enableHighAccuracy: false, // 是否高精度定位（默认 false，true 可能更耗电）
          timeout: 1000000, // 超时时间（5秒）
          maximumAge: 0 // 是否允许使用缓存位置（0 表示不缓存）
        }
      );
    },
    preloadImages() {
      const promises = this.hotFilmList.map(item => {
        return new Promise((resolve) => {
          const img = new Image();
          img.src = this.$buildFullImageUrl + item.pic;
          img.onload = resolve;
        });
      });
      return Promise.all(promises);
    },
    async initSwiper() {
      await this.preloadImages();
      // 初始化swiper或触发更新
    },
    buyMovies(film_id) {
      this.$router.push({
        path: './details',
        query: {
          film_id,
          type: 1
        }
      })
    },
    goFilms(index) {
      this.$router.push({
        name: 'films', query: {
          status: index
        }
      });
    },
    selectSeat() {
      this.$router.push({ name: 'seat' });
    },
    selectPosition() {
      this.$router.push({
        path: '/citySelect',
        query: {
          nowCity: this.cityName,
        }
      })
    },
    selectSearch() {
      this.$router.push({
        name: 'pageSearch'
      })
    },
    getTabData(name, title) {
      this.welfareList = this.oldData
        .filter(item => item.type_name == this.categoryList[this.active])
        .slice(0, 6);
    },

    async getWxConfigConfig(config) {
      try {
        wx.config({
          debug: false, // 开启调试模式（生产环境关闭），会在控制台输出 config 结果
          appId: "wxf6b22350d8075054", // 从后端获取，不要硬编码
          timestamp: config.timestamp.toString(), // 确保是字符串类型
          nonceStr: config.nonceStr,
          signature: config.signature,
          jsApiList: ["getLocation"]
        });

        // 监听 config 成功回调
        wx.ready(() => {
          wx.getLocation({
            type: "wgs84",
            timeout: 500000, // 超时时间建议设置 10000-15000ms（默认 10000ms）
            highAccuracyExpireTime: 500000, // 高精度定位超时时间（可选，仅支持高精度定位时生效）
            success: (res) => {
              const { longitude, latitude } = res;
              this.userLocation = { longitude, latitude };
              localStorage.setItem('longitude', this.userLocation.longitude)
              localStorage.setItem('latitude', this.userLocation.latitude)
              this.getCityData(this.userLocation.longitude, this.userLocation.latitude)
            },
            cancel: () => {
            },
            fail: (err) => {
              let name = localStorage.getItem("cityName")
              if (name) {
                this.cityName = name
              } else {
                this.cityName = '西安市'
              }
            }
          });
        });

        // 监听 config 失败回调
        wx.error((err) => {
          this.getLocationByBrowser()
          // 根据错误信息针对性解决（如签名错误、域名未配置等）
        });
      } catch (error) {
        let name = localStorage.getItem("cityName")
        if (name) {
          this.cityName = name
        } else {
          this.cityName = '西安市'
        }
      }
    },
    async getaccount() {

      try {
        // 1. 获取商品列表
        const res = await plantAPI.conversionList();

        if (!res.data?.length) {
          return;
        }

        // 2. 获取所有商品的图片数据
        const productNos = res.data.map(item => item.product_no);
        const picsResult = await plantAPI.directofficialPrice(productNos);

        // 3. 处理图片数据
        this.picsData = Object.entries(picsResult.data || {})
          .map(([key, value]) => ({
            key: String(key).trim(), // 统一转为字符串并去除空格
            value: (value) // 格式化图片URL
          }));

        // 4. 创建图片查找Map
        const imageMap = new Map(
          this.picsData.map(item => [item.key, item.value])
        );
        // 5. 合并图片到商品数据
        this.oldData = res.data.map(item => {
          const imgKey = String(item.product_no).trim();
          return {
            ...item,
            imgs: imageMap.get(imgKey).productPath,

            officialPrice: imageMap.get(imgKey).officialPrice || 0,

          };
        });

        // 6. 处理分类数据
        this.categoryList = [...new Set(
          this.oldData
            .map(item => item.type_name)
            .filter(Boolean) // 过滤掉空值
        )];

        // 7. 获取当前分类的商品
        if (this.categoryList.length > 0) {
          this.welfareList = this.oldData
            .filter(item => item.type_name === this.categoryList[this.active])
            .slice(0, 6);
        }

      } catch (error) {
        this.$toast('数据加载失败，请重试');
      }
      // 热门影片列表
      await plantAPI.gethotAPI({
        current: 1
      }).then(res => {
        this.hotFilmList = JSON.parse(res.data.body).data.records.slice(0, 10);
        const now = Date.now(); // 获取当前时间戳（毫秒）
        this.hotFilmList.forEach(item => {
          item.isReleased = new Date(item.publish_date).getTime() < now;
        })
      })
      // 待上映影片列表
      await plantAPI.getsoonAPI({
        current: 1
      }).then(res => {
        this.soonFilmList = JSON.parse(res.data.body).data.records.slice(0, 10);
      })
      await this.$nextTick(); // 等待DOM更新
      this.initSwiper();

    },
  },
  data() {
    return {
      activeTab: 'hot',
      bannerData: [],
      showbanner: true,
      showwelfare: true,
      showadvertJump: '0',
      showadvert: '',
      refreshing: false, // 新增下拉刷新状态
      picsData: [],
      oldData: [],
      cityData: [],
      addressComponent: {},
      cityName: "",
      // 获取经纬度
      userLocation: {},
      // 热门影片列表
      hotFilmList: [],
      // 待上映影片列表
      soonFilmList: [],
      value1: 0,
      categoryList: [
      ],
      welfareList: [

      ],
      active: 0,
      value: '',
      cardWidth: 78, // 卡片宽度（根据屏幕动态计算）
      gap: 6, // 卡片间距

    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  background: #F5F6F8;
  //min-height: calc(100vh - 95px);
  ///* 确保容器撑满整个视口 */
  //padding-bottom: 95px;
  height: 100vh;
  padding-bottom: 95px;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  /* 启用平滑滚动 */
}

::v-deep .van-sticky {
  background: #FFFFFF;
}

::v-deep .van-icon-search {
  color: #EE473B;
}

.main-film {
  width: 351px;
  height: 134px;
  margin: 12px auto 12px;

  img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }
}

/* 适用于所有浏览器（Chrome/Safari/Firefox/Edge） */
.swipe-container {
  overflow-x: auto;
  /* 允许横向滚动 */
  -webkit-overflow-scrolling: touch;
  /* iOS 平滑滚动 */
  scrollbar-width: none;

  /* Firefox */
  &::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari/Edge */
    width: 0;
    height: 0;
    background: transparent;
  }
}

.category-swipe {
  display: flex !important;
  /* 覆盖 vant 默认样式 */
  overflow: visible !important;
  scrollbar-width: none;
}

.card-item {
  display: inline-flex !important;
  /* 强制横向排列 */
  flex-direction: column;
  width: 78px;
  margin-right: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

/* 其他样式保持原样 */
.card-img {
  width: 78px;
  height: 105px;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.card-item {
  transition: transform 0.2s;

  &:active {
    transform: scale(0.98);
  }
}

.poster {
  width: 78px;
  border-radius: 8px;
  height: 105px;
  object-fit: cover;
}


.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 78px;
  height: 18px;
  padding: 4px 0 2px 0;
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 13px;
  color: #333333;
}

.card-tag {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 70px;
  height: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 10px;
  color: #999999;

}

.buy-btn {
  margin-top: 8px;
  width: 48px;
  height: 21px;
  background: #EE473B;
  // box-shadow: 0px 2px 3px rgba(238, 71, 59, 0.2);
  border-radius: 12px;
  font-family: PingFang SC;
  font-size: 12px;
  color: #FFFFFF;
}

.welfare {
  width: 351px;
  height: 240px;
  margin: 12px auto 0;
  background: #FFFFFF;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.hot-film {

  width: 351px;
  margin: auto;
  margin-top: 12px;
  height: 220px;
  background: #FFFFFF;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.title-header {
  padding: 8px;
  padding-right: 21px;
  justify-content: space-between;
  display: flex;
  align-items: center;

  .left-header {
    display: flex;
    align-items: center;
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 15px;
    color: #1A1A1A;

    .hot {
      margin-left: 8px;
      font-family: PingFang SC;
      font-size: 13px;
      color: #575757;
    }
  }

  .right-header {
    display: flex;
    align-items: center;
    height: 21px;
    line-height: 21px;

    >:first-child {
      width: 26px;
      height: 18px;
      line-height: 18px;
      font-family: PingFang SC;
      font-size: 13px;
      color: #575757;
    }

    >div:last-child {
      display: flex;
      align-items: center;
    }

  }

}

.upcoming {
  margin: 12px auto 0;
  width: 351px;
  height: 195px;
  background: #FFFFFF;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.swipe-welfare {
  padding-top: 12px;
}

.category-swipe-welfare {
  display: flex !important;
  /* 覆盖 vant 默认样式 */
  overflow: visible !important;
}

.card-item-welfare {
  display: inline-flex !important;
  /* 强制横向排列 */
  flex-direction: column;
  margin-right: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.box {
  width: 78px;
  height: 78px;
  background: rgba(144, 144, 144, 0.08);
  border-radius: 4px;
}

/* 其他样式保持原样 */
.card-img-welfare {
  position: relative;
  width: 55px;
  height: 55px;
  overflow: hidden;
  margin: 11px;
}

.poster-welfare {
  width: 55px;
  height: 55px;
  object-fit: cover;
}


.card-title-welfare {
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  margin-top: 7px;
  width: 78px;
  // height: 36px;
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 13px;
  color: #333333;

}

.exchange-btn {
  margin-top: 10px;
  height: 21px;
  position: relative;
  gap: 8px;
}

.price {
  width: 50px;
  background: #EE473B;
  height: 21px;
  border-radius: 12px 0 0 12px;
  /* 只保留左侧圆角 */
  font-family: PingFang SC;
  font-size: 12px;
  color: #FFFFFF;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.price::before {
  content: '';
  position: absolute;
  right: -3px;
  /* 让斜线稍微超出容器 */
  top: 0;
  width: 5px;
  /* 调整斜线宽度 */
  height: 100%;
  background: #EE473B;
  transform: skewX(-9deg);
  transform-origin: top right;
  border-radius: 0;
  /* 确保斜线部分没有圆角 */
}

.text {
  position: absolute;
  left: 48px;
  top: 0;
  width: 28px;
  height: 19px;
  line-height: 19px;
  border-radius: 0px 12px 12px 0px;
  font-family: PingFang SC;
  font-size: 10px;
  color: #EE473B;
  border: 1px solid #EE473B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

::v-deep .van-tabs__nav {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

::v-deep .van-tabs--line .van-tabs__wrap {
  height: 35px !important;
  padding: 0 !important;
}


/* 3. 样式：左右间距、圆角、阴影与 hot-film 完全一致 */
.banner-box {
  width: 351px; // 和 hot-film 一样
  height: 134px; // 可自己调
  margin: 12px auto 0; // 上 12px 居中，下 0（热门影片自己再带 12px 间隔）
  border-radius: 10px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.my-swipe,
.banner-img {
  width: 100%;
  height: 100%;
  display: block;
}


/* ========== 与“即将上映”完全一致 ========== */
.section-box {
  width: 351px;
  margin: 12px auto 0;
  background: #FFFFFF;
  box-shadow: 0 0 3px rgba(0, 0, 0, .1);
  border-radius: 10px;

  ::v-deep .van-tab__text {
    font-size: 15px !important;
  }
}

.title-header {
  padding: 8px 21px 8px 8px; // 和即将上映同一套边距
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.left-header {
  display: flex;
  align-items: center;
  gap: 16px; // 两个字之间留一点间隔
}

.tab-text {
  font-family: PingFang SC;
  font-weight: 600;
  font-size: 15px;
  color: #5B626A; // 未选中色

  &.active {
    color: #1A1A1A; // 选中色与“即将上映”标题同色
  }
}

.right-header {
  display: flex;
  align-items: center;
  height: 21px;
  line-height: 21px;

  >:first-child {
    width: 26px;
    height: 18px;
    line-height: 18px;
    font-family: PingFang SC;
    font-size: 13px;
    color: #575757;
  }

  >div:last-child {
    display: flex;
    align-items: center;
  }
}

/* ========== 列表样式 ========== */
.list-box {
  padding: 0 12px; // 与卡片内部左右 8px 保持一致
  // margin-top: 12px;
  padding-bottom: 20px;
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #F5F5F5;

  &:last-child {
    border: none;
  }

  .item-left {
    flex: 1;

    .item-name {
      font-size: 15px;
      color: #1A1A1A;
    }

    .item-desc {
      font-size: 12px;
      color: #999;
      margin-top: 4px;
    }
  }
}

::v-deep .van-tab {
  padding: 0 12px !important;
}

::v-deep .van-tab {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 0 12px !important;
}

::v-deep .van-tabs__nav {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
</style>
